<template>
    <div class="unit-baaseinfo-form-edit-wrap">
        <el-row>
            <el-col :span="2">
                <div class="iconfont icon-return return-btn" @click="closeFun" title="返回"></div>
            </el-col>
            <el-col :span="20">
                <p class="model-title"></p>
            </el-col>
            <el-col :span="2" style="display:flex;justify-content:flex-end;">
                <!-- <el-button @click="closeFun">返回</el-button> -->
                <el-button type="primary" @click="saveInfo('unitBaseInfoForm')">保存</el-button>
            </el-col>
        </el-row>
        <el-form label-width="170px" :model="unitBaseInfoForm" :rules="unitBaseInfoFormRules" ref="unitBaseInfoForm" @submit.native.prevent>
            <input type="hidden" v-model="unitBaseInfoForm.id">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="单位全称：" prop="name">
                        <el-input v-model="unitBaseInfoForm.name" auto-complete="off" placeholder="请输入单位全称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="成立时间：" prop="foundedTimeStr">
                        <el-date-picker
                            v-model="unitBaseInfoForm.foundedTimeStr"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="单位简称：" prop="shortName">
                        <el-input v-model="unitBaseInfoForm.shortName" auto-complete="off" placeholder="请输入简称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话：" prop="tel">
                        <el-input v-model="unitBaseInfoForm.tel" auto-complete="off" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="区域：" prop="areaid">
                        <el-select v-model="unitBaseInfoForm.areaid" 
                            placeholder="请选择区域"
                            clearable
                            filterable>
                            <el-option
                                v-for="item in areaOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属消防队：" prop="belongsFireBrigadeId">
                        <el-select v-model="unitBaseInfoForm.belongsFireBrigadeId" 
                            placeholder="请选择消防队"
                            clearable
                            filterable>
                            <el-option
                                v-for="item in belongsFireBrigadeOptions"
                                :key="Number(item.id)"
                                :label="item.dictValue"
                                :value="Number(item.dictKey)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所属行业：" prop="industryId">
                        <el-select v-model="unitBaseInfoForm.industryId" 
                            placeholder="请选择行业"
                            filterable>
                            <el-option
                                v-for="item in industryOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="高危防火单位：" prop="fireType">
                        <el-switch v-model="unitBaseInfoForm.fireType" active-text="是" active-value="2" inactive-text="否" inactive-value="1"></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="室内地图：" prop="indoorMapId">
                        <el-select v-model="unitBaseInfoForm.indoorMapId" 
                            placeholder="请选择室内地图" filterable clearable @change="changeIndoorMap">
                            <el-option
                                v-for="item in indoorMapOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="室内地图结构：" prop="indoorId">
                        <el-select v-model="unitBaseInfoForm.indoorId" 
                            placeholder="请选择室内地图结构"
                            clearable
                            filterable>
                            <el-option
                                v-for="item in indoorIdOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="选取经纬度：">
                        <div id="UnitBaseInfoFormEditBaiduMap" style="height: 300px; width: 93%;"></div>
                        <input id="unitName_mapInput" class="form-control" v-model="valtemp" placeholder="请输入地点"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="经度：" prop="longitude">
                        <el-input v-model="unitBaseInfoForm.longitude" auto-complete="off" placeholder="请输入经度"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="纬度：" prop="latitude">
                        <el-input v-model="unitBaseInfoForm.latitude" auto-complete="off" placeholder="请输入纬度"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="范围（米）：" prop="radius">
                        <el-input v-model="unitBaseInfoForm.radius" auto-complete="off" placeholder="请输入范围"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="微型消防站：" prop="isMircoFireStation">
                        <el-switch v-model="unitBaseInfoForm.isMircoFireStation" active-text="有" active-value="1" inactive-text="无" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="专职消防队：" prop="isFullTimeStation">
                        <el-switch v-model="unitBaseInfoForm.isFullTimeStation" active-text="有" active-value="1" inactive-text="无" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="兼职消防队：" prop="isPartTimeStation">
                        <el-switch v-model="unitBaseInfoForm.isPartTimeStation" active-text="有" active-value="1" inactive-text="无" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="多产权建筑：" prop="isMultiPopertyBuild">
                        <el-switch v-model="unitBaseInfoForm.isMultiPopertyBuild" active-text="是" active-value="1" inactive-text="否" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="总监控室位置：" prop="monitoringRoomLocation">
                        <el-input v-model="unitBaseInfoForm.monitoringRoomLocation" auto-complete="off" placeholder="请输入总监控室位置"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="总监控室电话：" prop="monitoringRoomTel">
                        <el-input v-model="unitBaseInfoForm.monitoringRoomTel" auto-complete="off" placeholder="请输入总监控室电话"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="2">
                    <el-form-item label="异常短信提醒：" prop="isExceptionSms">
                        <el-switch v-model="unitBaseInfoForm.isExceptionSms" active-text="是" active-value="1" inactive-text="否" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col class="isExceptionSmsList-wrap" :span="10">
                    <el-form-item label="">
                        <el-checkbox-group v-if="unitBaseInfoForm.isExceptionSms==1" v-model="unitBaseInfoForm.isExceptionSmsList">
                            <el-checkbox label="1">报警</el-checkbox>
                            <el-checkbox label="2">故障</el-checkbox>
                            <el-checkbox label="3">屏蔽</el-checkbox>
                            <el-checkbox label="4">报警复位</el-checkbox>
                            <el-checkbox label="5">故障复位</el-checkbox>
                            <el-checkbox label="6">屏蔽复位</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否短信通知上岗：" prop="isWatchSms">
                        <el-switch v-model="unitBaseInfoForm.isWatchSms" active-text="是" active-value="1" inactive-text="否" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="处理报警短信提示服务：" prop="isHandlerAlertSms">
                        <el-switch v-model="unitBaseInfoForm.isHandlerAlertSms" active-text="是" active-value="1" inactive-text="否" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="处理报警邮件提示服务：" prop="isHandlerAlertMail">
                        <el-switch v-model="unitBaseInfoForm.isHandlerAlertMail" active-text="是" active-value="1" inactive-text="否" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="单位类别：" prop="userClasses">
                        <el-select v-model="unitBaseInfoForm.userClasses" 
                            placeholder="请选择单位类别"
                            clearable
                            filterable>
                            <el-option
                                v-for="item in userClassOptions"
                                :key="Number(item.id)"
                                :label="item.dictValue"
                                :value="Number(item.dictKey)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属中心：" prop="belongsCenter">
                        <el-input v-model="unitBaseInfoForm.belongsCenter" auto-complete="off" placeholder="请输入所属中心"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="单位地址：" prop="address">
                        <el-input v-model="unitBaseInfoForm.address" auto-complete="off" placeholder="请输入单位地址"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="邮政编码：" prop="postalCode">
                        <el-input v-model="unitBaseInfoForm.postalCode" auto-complete="off" placeholder="请输入邮政编码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电子邮箱：" prop="email">
                        <el-input v-model="unitBaseInfoForm.email" auto-complete="off" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="总建筑面积（m²）：" prop="overallFloorageStr">
                        <el-input type="number" v-model="unitBaseInfoForm.overallFloorageStr" auto-complete="off" placeholder="请输入总建筑面积"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="占地面积（m²）：" prop="floorSpaceStr">
                        <el-input type="number" v-model="unitBaseInfoForm.floorSpaceStr" auto-complete="off" placeholder="请输入占地面积"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="防火等级：" prop="fireRating">
                        <el-select v-model="unitBaseInfoForm.fireRating" 
                            placeholder="请选择防火等级"
                            clearable
                            filterable>
                            <el-option
                                v-for="item in fireRatingOptions"
                                :key="Number(item.id)"
                                :label="item.dictValue"
                                :value="Number(item.dictKey)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属消防队号码：" prop="belongsFireBrigadeMobile">
                        <el-input v-model="unitBaseInfoForm.belongsFireBrigadeMobile" auto-complete="off" placeholder="请输入所属消防队号码"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="职工人数（人）：" prop="workerNumber">
                        <el-input v-model="unitBaseInfoForm.workerNumber" auto-complete="off" placeholder="请输入职工人数"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="探测器数量（个）：" prop="detecorNumber">
                        <el-input v-model="unitBaseInfoForm.detecorNumber" auto-complete="off" placeholder="请输入探测器数量"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="消防备案：" prop='fireStationRecordUrl'>
                <el-upload
                    :action="QINIUUPLOADURL"
                    :multiple="true"
                    ref="uploadStationRecord"
                    list-type="picture-card"
                    :data="qiniuDataStationRecord"
                    :on-success="function(res, file, fileList) {return handleAvatarSuccess(res, file, fileList, 'qiniuDataStationRecord')}"
                    :on-remove="function(file, fileList) {return handleRemovePic(file, fileList, 'qiniuDataStationRecord')}"
                    :on-error="function(res) {return handleError(res, 'qiniuDataStationRecord')}"
                    :before-upload="function(file){return beforeAvatarUpload(file, 'qiniuDataStationRecord')}"
                    :on-preview="$imgPreview"
                    :file-list="qiniuDataStationRecord.fileList">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="单位图标（logo）：" prop='logoUrl'>
                <el-upload
                    :action="QINIUUPLOADURL"
                    :multiple="true"
                    ref="uploadLogo"
                    list-type="picture-card"
                    :data="qiniuDataLogo"
                    :on-success="function(res, file, fileList) {return handleAvatarSuccess(res, file, fileList, 'qiniuDataLogo')}"
                    :on-remove="function(file, fileList) {return handleRemovePic(file, fileList, 'qiniuDataLogo')}"
                    :on-error="function(res) {return handleError(res, 'qiniuDataLogo')}"
                    :before-upload="function(file){return beforeAvatarUpload(file, 'qiniuDataLogo')}"
                    :on-exceed="function(files, fileList){return handleExceed(files, fileList, 'qiniuDataLogo')}"
                    :on-preview="$imgPreview"
                    :file-list="qiniuDataLogo.fileList"
                    :limit="1"
                    accept="image/gif,image/jpeg,image/jpg,image/bmp,image/png">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="建筑总平面图：" prop='picturesUrl'>
                <el-upload
                    :action="QINIUUPLOADURL"
                    :multiple="true"
                    ref="uploadBuild"
                    list-type="picture-card"
                    :data="qiniuDataBuild"
                    :on-success="function(res, file, fileList) {return handleAvatarSuccess(res, file, fileList, 'qiniuDataBuild')}"
                    :on-remove="function(file, fileList) {return handleRemovePic(file, fileList, 'qiniuDataBuild')}"
                    :on-error="function(res) {return handleError(res, 'qiniuDataBuild')}"
                    :before-upload="function(file){return beforeAvatarUpload(file, 'qiniuDataBuild')}"
                    :on-preview="$imgPreview"
                    :file-list="qiniuDataBuild.fileList">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="联网单位风景图：" prop='viewUrl'>
                <el-upload
                    :action="QINIUUPLOADURL"
                    :multiple="true"
                    ref="uploadLandscape"
                    list-type="picture-card"
                    :data="qiniuDataLandscape"
                    :on-success="function(res, file, fileList) {return handleAvatarSuccess(res, file, fileList, 'qiniuDataLandscape')}"
                    :on-remove="function(file, fileList) {return handleRemovePic(file, fileList, 'qiniuDataLandscape')}"
                    :on-error="function(res) {return handleError(res, 'qiniuDataLandscape')}"
                    :before-upload="function(file){return beforeAvatarUpload(file, 'qiniuDataLandscape')}"
                    :on-exceed="function(files, fileList){return handleExceed(files, fileList, 'qiniuDataLandscape')}"
                    :on-preview="$imgPreview"
                    :file-list="qiniuDataLandscape.fileList"
                    :limit="1"
                    accept="image/gif,image/jpeg,image/jpg,image/bmp,image/png">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="联网单位图纸：" prop='drawingPicturesUrls'>
                <el-upload
                    :action="QINIUUPLOADURL"
                    :multiple="true"
                    ref="uploadDesign"
                    list-type="picture-card"
                    :data="qiniuDataDesign"
                    :on-success="function(res, file, fileList) {return handleAvatarSuccess(res, file, fileList, 'qiniuDataDesign')}"
                    :on-remove="function(file, fileList) {return handleRemovePic(file, fileList, 'qiniuDataDesign')}"
                    :on-error="function(res) {return handleError(res, 'qiniuDataDesign')}"
                    :before-upload="function(file){return beforeAvatarUpload(file, 'qiniuDataDesign')}"
                    :on-preview="$imgPreview"
                    :file-list="qiniuDataDesign.fileList">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="联网单位VR地址：" prop="vrUrl">
                        <el-input v-model="unitBaseInfoForm.vrUrl" auto-complete="off" placeholder="请输入名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row  v-for="(item, i) in legalRepresentativeList" :key="'legalRepresentativeList-' + i">
                <el-col :span="24">
                    <el-form-item label="法人代表：">
                        <el-row>
                            <el-col :span="4">
                                <el-input v-model="item.name" auto-complete="off" placeholder="请输入姓名"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.idCardNumber" auto-complete="off" placeholder="请输入身份证号码"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <span class="el-icon-message"
                                    :class="{'checked': item.isAutoSendMail}"
                                    @click="changeBtAutoSendMailMsg('legalRepresentativeList', i, 1)"
                                    :title="item.isAutoSendMail ? '邮件服务已开通' : '邮件服务已关闭'"></span>
                                <span class="el-icon-mobile-phone"
                                    :class="{'checked': item.isAutoSendMessage}"
                                    @click="changeBtAutoSendMailMsg('legalRepresentativeList', i)"
                                    :title="item.isAutoSendMail ? '短信服务已开通' : '短信服务已关闭'"></span>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row  v-for="(item, i) in securityOwnerList" :key="'securityOwnerList-' + i">
                <el-col :span="24">
                    <el-form-item label="安全责任人：" prop="securityOwner">
                        <el-row>
                            <el-col :span="4">
                                <el-input v-model="item.name" auto-complete="off" placeholder="请输入姓名"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.idCardNumber" auto-complete="off" placeholder="请输入身份证号码"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <span class="el-icon-message"
                                    :class="{'checked': item.isAutoSendMail}"
                                    @click="changeBtAutoSendMailMsg('securityOwnerList', i, 1)"
                                    :title="item.isAutoSendMail ? '邮件服务已开通' : '邮件服务已关闭'"></span>
                                <span class="el-icon-mobile-phone"
                                    :class="{'checked': item.isAutoSendMessage}"
                                    @click="changeBtAutoSendMailMsg('securityOwnerList', i)"
                                    :title="item.isAutoSendMail ? '短信服务已开通' : '短信服务已关闭'"></span>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-for="(item, i) in securityManagerList" :key="'securityManagerList-' + i">
                <el-col :span="24">
                    <el-form-item label="安全管理人：" prop="securityManager">
                        <el-row>
                            <el-col :span="4">
                                <el-input v-model="item.name" auto-complete="off" placeholder="请输入姓名"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.idCardNumber" auto-complete="off" placeholder="请输入身份证号码"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <span class="el-icon-message"
                                    :class="{'checked': item.isAutoSendMail}"
                                    @click="changeBtAutoSendMailMsg('securityManagerList', i, 1)"
                                    :title="item.isAutoSendMail ? '邮件服务已开通' : '邮件服务已关闭'"></span>
                                <span class="el-icon-mobile-phone"
                                    :class="{'checked': item.isAutoSendMail}"
                                    @click="changeBtAutoSendMailMsg('securityManagerList', i)"
                                    :title="item.isAutoSendMail ? '短信服务已开通' : '短信服务已关闭'"></span>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-for="(item, i) in fireManagerList" :key="'fireManagerList-' + i">
                <el-col :span="24">
                    <el-form-item label="消防管理人：">
                        <el-row>
                            <el-col :span="4">
                                <el-input v-model="item.name" auto-complete="off" placeholder="请输入姓名"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.idCardNumber" auto-complete="off" placeholder="请输入身份证号码"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <span class="el-icon-message"
                                    :class="{'checked': item.isAutoSendMail}"
                                    @click="changeBtAutoSendMailMsg('fireManagerList', i, 1)"
                                    :title="item.isAutoSendMail ? '邮件服务已开通' : '邮件服务已关闭'"></span>
                                <span class="el-icon-mobile-phone"
                                    :class="{'checked': item.isAutoSendMail}"
                                    @click="changeBtAutoSendMailMsg('fireManagerList', i)"
                                    :title="item.isAutoSendMail ? '短信服务已开通' : '短信服务已关闭'"></span>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-for="(item, i) in partTimeManagerList" :key="'partTimeManagerList-' + i">
                <el-col :span="24">
                    <el-form-item :label="i == 0 ? '兼职管理人：' : ''">
                        <el-row>
                            <el-col :span="4">
                                <el-input v-model="item.name" auto-complete="off" placeholder="请输入姓名"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.idCardNumber" auto-complete="off" placeholder="请输入身份证号码"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <span class="el-icon-message"
                                    :class="{'checked': item.isAutoSendMail}"
                                    @click="changeBtAutoSendMailMsg('partTimeManagerList', i, 1)"
                                    :title="item.isAutoSendMail ? '邮件服务已开通' : '邮件服务已关闭'"></span>
                                <span class="el-icon-mobile-phone"
                                    :class="{'checked': item.isAutoSendMail}"
                                    @click="changeBtAutoSendMailMsg('partTimeManagerList', i)"
                                    :title="item.isAutoSendMail ? '短信服务已开通' : '短信服务已关闭'"></span>
                                <span v-if="i == 0" class="el-icon-circle-plus-outline"
                                    @click="addPartTimeManager"
                                    title="添加兼职管理人"></span>
                                <span v-else class="el-icon-remove-outline"
                                    @click="deletePartTimeManager(i)"
                                    title="添加兼职管理人"></span>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-for="(item, i) in fireFightingCertifiedStaffList" :key="'fireFightingCertifiedStaffList-' + i">
                <el-col :span="24">
                    <el-form-item :label="i == 0 ? '消防持证上岗人员：' : ''">
                        <el-row>
                            <el-col :span="4">
                                <el-input v-model="item.name" auto-complete="off" placeholder="请输入姓名"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.identification" auto-complete="off" placeholder="请输入身份证号码"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.tel" auto-complete="off" placeholder="请输入手机号"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
                            </el-col>
                            <el-col :span="4" class="upload-fire-fighting-cert-wrap">
                                <!-- <img v-if="item.certificateUrl != ''" :src="item.certificateUrl" width="30px" height="30px"/> -->
                                <el-upload
                                    class="upload-fire-fighting-cert"
                                    :action="QINIUUPLOADURL"
                                    :multiple="true"
                                    ref="uploadFireFightingCertifiedStaff"
                                    list-type="picture-card"
                                    :data="item.qiniuDataFireFightingCertifiedStaff"
                                    :on-success="function(res, file, fileList) {return handleAvatarSuccess(res, file, fileList, 'qiniuDataFireFightingCertifiedStaff', item)}"
                                    :on-remove="function(file, fileList) {return handleRemovePic(file, fileList, 'qiniuDataFireFightingCertifiedStaff', item)}"
                                    :on-error="function(res) {return handleError(res, 'qiniuDataFireFightingCertifiedStaff')}"
                                    :before-upload="function(file){return beforeAvatarUpload(file, 'qiniuDataFireFightingCertifiedStaff', item)}"
                                    :on-preview="$imgPreview"
                                    :on-exceed="function(files, fileList){return handleExceed(files, fileList, 'qiniuDataFireFightingCertifiedStaff')}"
                                    :file-list="item.qiniuDataFireFightingCertifiedStaff.fileList"
                                    :limit="1">
                                    <span class="el-icon-upload" title="上传证书" slot="trigger"></span>
                                </el-upload>
                                
                                <span v-if="i == 0" class="el-icon-circle-plus-outline"
                                    @click="addFireFightingCertifiedStaff"
                                    title="添加消防持证上岗人员"></span>
                                <span v-else class="el-icon-remove-outline"
                                    @click="deleteFireFightingCertifiedStaff(i)"
                                    title="删除消防持证上岗人员"></span>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 楼栋信息 -->
            <el-row v-for="(item, i) in storiedBuildInfo" :key="'storiedBuildInfo-' + i">
                <el-col :span="24">
                    <el-form-item :label="i == 0 ? '楼栋信息：' : ''">
                        <el-row>
                            <el-col :span="4">
                                <el-input v-model="item.name" auto-complete="off" placeholder="请输入楼栋名称" disabled></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.buildSpace" auto-complete="off" placeholder="请输入建筑面积（㎡）"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.buildHeight" auto-complete="off" placeholder="请输入建筑高度（m）"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.location" auto-complete="off" placeholder="请输入值班室位置"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-select v-model="item.dutyAccounts" 
                                    placeholder="请选择值班人员"
                                    multiple
                                    clearable
                                    filterable>
                                    <el-option
                                        v-for="item in personnelOptions"
                                        :key="item.accountName"
                                        :label="item.name"
                                        :value="item.accountName">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import BMap from 'BMap'
import { qnToken } from '@/api/api'
import { getIndustryList, updateBasicInfoExt,getIndoorInfoList } from '@/api/org'
import * as Dao from '@/api/area'
import { getDictByCode } from '@/api/dic'
import { getOrgUserList } from '@/api/user'
import util from '@/utils/util'
import { validphone } from '@/utils/validate'

var map
let TYPEMAP = {
    qiniuDataLogo: '单位图标（logo）',
    qiniuDataBuild: '建筑总平面图',
    qiniuDataLandscape: '联网单位风景图',
    qiniuDataDesign: '联网单位图纸',
    qiniuDataStationRecord: '消防备案',
    qiniuDataFireFightingCertifiedStaff: '消防持证上岗人员'
}
export default {
    name: 'UnitBaseInfoFormEdit',
    props: {
        oldInfo: {
            type: Object,
            default () {
                return {}
            }
        },
        organizationId: {
            required: true
        },
        id: {
            required: true
        },
        buildInfo: {
            required: true
        },
        closeFun: {
            type: Function,
            required: true
        }
    },
    data() {
        // 检测安全责任人
        var checkSecurityOwner = (rule, value, callback) => {
            var data = this.securityOwnerList[0]
            if (data.name == '' || data.phone == '' || data.email == '') {
                callback(new Error('请完善安全责任人信息'))
            }else if (data.idCardNumber != '' && !/^(\d{15}$|^\d{15}(\d|X|x)^\d{18}$|^\d{17}(\d|X|x))$/.test(data.idCardNumber)) {
                callback(new Error('请输入有效的身份证号'))
            } else if (!validphone(data.phone)){
                callback(new Error('请输入正确的手机号码'))
            } else {
                callback();
            }
        }
        // 检测安全管理人
        var checkSecurityManager = (rule, value, callback) => {
            var data = this.securityManagerList[0]
            if (data.name == '' || data.phone == '' || data.email == '') {
                callback(new Error('请完善安全管理人信息'))
            }else if (data.idCardNumber != '' && !/^(\d{15}$|^\d{15}(\d|X|x)^\d{18}$|^\d{17}(\d|X|x))$/.test(data.idCardNumber)) {
                callback(new Error('请输入有效的身份证号'))
            } else if (!validphone(data.phone)){
                callback(new Error('请输入正确的手机号码'))
            } else {
                callback();
            }
        };

        return {
            // 上传图片携带的默认参数
            qiniuDefaultData: {
                token : '',
            },
            // 消防备案
            qiniuDataStationRecord: {
                key : '',
                fileList:[],
            },
            // 单位图标上传数据
            qiniuDataLogo: {
                key : '',
                fileList:[],
            },
            // 建筑总平面图上传数据
            qiniuDataBuild: {
                key : '',
                fileList:[],
            },
            // 联网单位风景图上传数据
            qiniuDataLandscape: {
                key : '',
                fileList:[],
            },
            // 联网单位图纸上传数据
            qiniuDataDesign: {
                key : '',
                fileList:[],
            },
            // 消防持证上岗人员上传数据
            qiniuDataFireFightingCertifiedStaff: {
                key : '',
                fileList:[],
            },
            // 法人代表信息
            legalRepresentativeList: [{
                id: this.id,
                name: '', 
                role: 8,
                phone: '',
                email: '',
                idCardNumber: '',
                isAutoSendMail: 0,
                isAutoSendMessage : 0
            }],
            // 安全责任人信息
            securityOwnerList: [{
                id: this.id,
                name: '', 
                role: 9,
                phone: '',
                email: '',
                idCardNumber: '',
                isAutoSendMail: 0,
                isAutoSendMessage : 0
            }],
            // 安全管理人信息
            securityManagerList: [{
                id: this.id,
                name: '', 
                role: 10,
                phone: '',
                email: '',
                idCardNumber: '',
                isAutoSendMail: 0,
                isAutoSendMessage : 0
            }],
            // 消防管理人信息
            fireManagerList: [{
                id: this.id,
                name: '', 
                role: 11,
                phone: '',
                email: '',
                idCardNumber: '',
                isAutoSendMail: 0,
                isAutoSendMessage : 0
            }],
            // 兼职管理人多行表单
            partTimeManagerList: [{
                id: this.id,
                name: '', 
                role: 15,
                phone: '',
                email: '',
                idCardNumber: '',
                isAutoSendMail: 0,
                isAutoSendMessage : 0
            }],
            // 消防持证上岗人员
            fireFightingCertifiedStaffList: [{
                id: this.id,
                name: '', 
                tel: '',
                email: '',
                identification: '',
                certificateUrl: '',
                // 上传的文件
                qiniuDataFireFightingCertifiedStaff: {
                    key : '',
                    fileList:[],
                },
            }],
            // 楼栋信息
            storiedBuildInfo: [],
            unitBaseInfoForm: {
                id: this.id,
                organizationId: this.organizationId,
                account: this.$store.state.userinfo.accountName,
                name: '', // 单位全称
                foundedTimeStr: '', // 成立时间
                shortName: '', // 单位简称
                tel: '', // 联系电话
                areaid: '', // 区域
                belongsFireBrigadeId: '', // 所属消防队
                gridId: '', // 网格
                industryId: '', // 所属行业
                fireType: 1, // 高危防火单位
                indoorMapId:'',//室内地图
                indoorId:'',//室内地图结构
                longitude: '', // 经度
                latitude: '', // 纬度
                radius: '', // 范围
                isExceptionSms: 0, // 异常短信开关
                isExceptionSmsList: '', // 异常短信通知类型
                isWatchSms: 0, // 上岗提醒短信
                isHandlerAlertSms: 0, // 处理报警短信提示服务
                isHandlerAlertMail: 0, // 处理报警邮件提示服务
                isMircoFireStation: 0, // 微型消防站
                isFullTimeStation: 0, // 专职消防队
                isPartTimeStation: 0, // 兼职消防队
                userClasses: '', // 单位类别（用户类别）
                belongsCenter: '', // 所属中心
                address: '', // 单位地址
                postalCode: '', // 邮政编码
                email: '', // 电子邮箱
                overallFloorageStr: '', // 总建筑面积
                floorSpaceStr: '', // 占地面积
                fireRating: '', // 防火等级
                belongsFireBrigadeMobile: '', // 所属消防队号码
                workerNumber: '', // 职工人数
                detecorNumber: '', // 探测器数量
                logoUrl: '', // 单位logo
                picturesUrl: '', // 建筑总平面图
                viewUrl: '', // 单位风景图
                drawingPicturesUrls: '', // 联网单位图纸
                vrUrl: '', // 单位vr地址
                fireFighter: JSON.stringify([]), // 消防持证上岗人员
                contacts: JSON.stringify([]),  //  Y   联系人
                isMultiPopertyBuild: 0, // 是否多产权建筑
                monitoringRoomLocation: '', // 总监控室地址
                monitoringRoomTel: '' // 总监控室电话
            },
            unitBaseInfoFormRules: {
                name: [
                    { required: true, message: '请输入单位全称', trigger: 'blur' }
                ],
                shortName: [
                    { required: true, message: '请输入单位简称', trigger: 'blur' },
                    { pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,8}$/, message: '请输入有效的简称，长度不超过8个字符', trigger: 'blur'}
                ],
                tel: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ],
                // areaid: [
                //     { required: true, message: '请选择区域', trigger: 'change' }
                // ],
                // belongsFireBrigadeId: [
                //     { required: true, message: '请选择所属消防大队', trigger: 'change' }
                // ],
                gridId: [
                    { required: true, message: '请选择网格', trigger: 'change' }
                ],
                industryId: [
                    { required: true, message: '请选择所属行业', trigger: 'change' }
                ],
                longitude: [
                    { required: true, message: '请输入经度', trigger: 'blur' },
                    { pattern: /^-?(?:(?:180(?:\.0{1,18})?)|(?:(?:(?:1[0-7]\d)|(?:[1-9]?\d))(?:\.\d{1,18})?))$/, message: '请输入有效的经度', trigger: 'blur'}
                ],
                latitude: [
                    { required: true, message: '请输入纬度', trigger: 'blur' },
                    { pattern: /^-?(?:90(?:\.0{1,18})?|(?:[1-8]?\d(?:\.\d{1,18})?))$/, message: '请输入有效的经度', trigger: 'blur'}
                ],
                radius: [
                    { required: true, message: '请输入范围', trigger: 'blur' }
                ],
                isMircoFireStation: [
                    { required: true, message: '请选择微型消防站有无', trigger: 'change' }
                ],
                isFullTimeStation: [
                    { required: true, message: '请选择专职消防队有无', trigger: 'change' }
                ],
                isPartTimeStation: [
                    { required: true, message: '请选择兼职消防队有无', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入单位地址', trigger: 'blur' }
                ],
                logoUrl: [
                    { required: true, message: '请上传单位图标', trigger: 'change' }
                ],
                viewUrl: [
                    { required: true, message: '请上传联网单位风景图', trigger: 'change' }
                ],
                securityOwner: [
                    { required: true, validator: checkSecurityOwner, trigger: 'blur' }
                ],
                securityManager: [
                    { required: true, validator: checkSecurityManager, trigger: 'blur' }
                ],
                isMultiPopertyBuild: [
                    { required: true, message: '请选择是否多产权建筑', trigger: 'change' }
                ],
            },
            areaOptions: [], // 区域下拉框数据
            belongsFireBrigadeOptions: [], // 所属消防队下拉框数据
            gridOptions: [{
                gridName: '测试网格',
                id: '1'
            }], // 网格下拉框数据
            industryOptions: [], // 行业下拉框数据
            userClassOptions: [], // 单位类别下拉框数据
            fireRatingOptions: [], // 防火等级下拉框数据
            valtemp: '', // 地图搜索的名称
            indoorMapOptions: [], // 室内地图编码
            indoorIdOptions: [], // 室内地图楼层编码
            personnelOptions: [], // 值班人员数据
        }
    },
    created() {
        let that = this
        // 获取token
        qnToken({}).then((result) => {
            this.qiniuDefaultData.token = result.data
            $.extend(this.qiniuDataStationRecord, this.qiniuDefaultData)
            $.extend(this.qiniuDataLogo, this.qiniuDefaultData)
            $.extend(this.qiniuDataBuild, this.qiniuDefaultData)
            $.extend(this.qiniuDataLandscape, this.qiniuDefaultData)
            $.extend(this.qiniuDataDesign, this.qiniuDefaultData)
            $.extend(this.fireFightingCertifiedStaffList[0].qiniuDataFireFightingCertifiedStaff, this.qiniuDefaultData)
             // 获取区域下拉框数据
            that.getAreaOptions()
            // 获取所属消防队下拉框数据
            that.getBelongsFireBrigadeOptions()
            // 获取网格下拉框数据
            // that.getGridOptions()
            // 获取行业下拉框数据
            that.getIndustryOptions()
            // 获取单位列表下拉框数据
            that.getUserClassOptions()
            // 获取防火等级下拉框数据
            that.getFireRatingOptions()
            // 室内地图列表
            that.getIndoorInfoOptions()
            // 获取单位楼栋信息
            that.getUnitBuildList()
            // 获取值班人员信息
            that.getPersonnelOptions()
            that.$nextTick(() => {
                // 如果有历史数据
                if (Object.keys(that.oldInfo).length > 0) {
                    setTimeout(() => {
                        // 合并相同key
                        // $.extend(that.unitBaseInfoForm, that.oldInfo)
                        for(var key in that.unitBaseInfoForm) {
                            if(key === 'foundedTimeStr') {
                                that.unitBaseInfoForm[key] = that.oldInfo.foundedTime // 成立时间
                            } else if(key === 'floorSpaceStr') {
                                that.unitBaseInfoForm[key] = that.oldInfo.floorSpace // 总建筑面积
                            } else if(key === 'overallFloorageStr') {
                                that.unitBaseInfoForm[key] = that.oldInfo.overallFloorage // 占地面积
                            } else if(key === 'fireType' || key === 'isMircoFireStation' || key === 'isFullTimeStation' || key === 'isPartTimeStation' || key === 'isExceptionSms' || key === 'isWatchSms' || key === 'isHandlerAlertSms' ||  key === 'isHandlerAlertMail' || key === 'isMultiPopertyBuild') {
                                that.unitBaseInfoForm[key] = String(that.oldInfo[key])
                            } else if(key === 'isExceptionSmsList') {
                                that.unitBaseInfoForm[key] = that.oldInfo[key].split(',')
                            } else if(key === 'areaid') { // 区域
                                that.unitBaseInfoForm[key] = that.oldInfo[key] || ''
                            } else if(key === 'belongsFireBrigadeId') { // 所属消防队
                                that.unitBaseInfoForm[key] = that.oldInfo[key] || ''
                            } else if(key === 'userClasses') { // 单位类别
                                that.unitBaseInfoForm[key] = that.oldInfo[key] || ''
                            }  else if(key === 'fireRating') { // 防火等级
                                that.unitBaseInfoForm[key] = that.oldInfo[key] || ''
                            } else {
                                if(that.oldInfo[key] || that.oldInfo[key] === 0) {
                                    that.unitBaseInfoForm[key] = that.oldInfo[key]
                                }
                            }
                        }
                        // that.unitBaseInfoForm.isMircoFireStation = 1
                        // 设置上传图片初始值(消防设备)
                        that.oldInfo.fireStationRecordUrl ? $.each(that.oldInfo.fireStationRecordUrl.split(','), (index,url) => {
                            that.qiniuDataStationRecord.fileList.push({
                                name: that.unitBaseInfoForm.name + '-stationrecord-' + index,
                                url:url
                            })
                        }) : ''
                        // 设置上传图片初始值(单位图标)
                        that.unitBaseInfoForm.logoUrl ? $.each(that.unitBaseInfoForm.logoUrl.split(','), (index,url) => {
                            that.qiniuDataLogo.fileList.push({
                                name: that.unitBaseInfoForm.name + '-logo-' +  + index,
                                url:url
                            })
                        }) : ''
                        // 设置上传图片初始值（建筑总平面图）  
                        that.unitBaseInfoForm.picturesUrl ? $.each(that.unitBaseInfoForm.picturesUrl.split(','), (index,url) => {
                            that.qiniuDataBuild.fileList.push({
                                name: that.unitBaseInfoForm.name + '-build-' + index,
                                url:url
                            })
                        }) : ''
                        // 设置上传图片初始值（联网单位风景图）
                        that.unitBaseInfoForm.viewUrl ? $.each(that.unitBaseInfoForm.viewUrl.split(','), (index,url) => {
                            that.qiniuDataLandscape.fileList.push({
                                name: that.unitBaseInfoForm.name + '-view-' + index,
                                url:url
                            })
                        }) : ''
                        // 设置上传图片初始值（联网单位图纸）
                        that.unitBaseInfoForm.drawingPicturesUrls ? $.each(that.unitBaseInfoForm.drawingPicturesUrls.split(','), (index,url) => {
                            that.qiniuDataDesign.fileList.push({
                                name: that.unitBaseInfoForm.name + '-design-' + index,
                                url:url
                            })
                        }) : ''
                        // 多行表单数据设置
                        that.legalRepresentativeDataReset()
                        // 消防持证上岗人员
                        if(that.oldInfo.firefighters.length > 0) {
                            let arr = that.oldInfo.firefighters
                            for(var i=0, len=arr.length; i < len; i++) {
                                if(i > 0) {
                                    // 增加一行
                                    that.addFireFightingCertifiedStaff()
                                }
                                $.extend(that.fireFightingCertifiedStaffList[i], that.oldInfo.firefighters[i])
                                // 设置上传图片初始值(消防持证上岗人员)
                                that.oldInfo.firefighters[i].certificateUrl ? $.each(that.oldInfo.firefighters[i].certificateUrl.split(','), (index,url) => {
                                    that.fireFightingCertifiedStaffList[i].qiniuDataFireFightingCertifiedStaff.fileList.push({
                                        name: that.unitBaseInfoForm.name + '-firefightingcert-' + index,
                                        url: url
                                    })
                                }) : ''
                            }
                        }
                    }, 200)
                }
                // 初始化地图
                that.initMap()
                that.mapSearch()
            })
        })
    },
    methods: {
        // 获取值班人员下拉框数据
        getPersonnelOptions() {
            let that = this
            getOrgUserList({
                orgIds: that.organizationId
            }).then(res => {
                that.personnelOptions = res.data
            })
        },
        // 获取单位楼栋信息
        getUnitBuildList() {
            let that = this
            let arr = JSON.parse(JSON.stringify(that.buildInfo))
            // 将值班人员转换成数组格式
            for(let i=0, len=arr.length; i < len; i++) {
                if(arr[i].dutyAccounts) {
                    arr[i].dutyAccounts = arr[i].dutyAccounts.split(',')
                }
            }
            that.storiedBuildInfo = arr
        },
        // 获取区域下拉框数据
        getAreaOptions() {
            let that = this
            let parames = {
                parentId: -1,
 				pageIndex: 0,
 				pageSize: 10000,
 				queryType: 0
            }
            Dao.getAreaCounty(parames).then(res => {
                that.areaOptions = res.data
            })
        },
        // 获取所属消防队下拉框数据
        getBelongsFireBrigadeOptions() {
            let that = this
            getDictByCode({code: 18}).then(res => {
                that.belongsFireBrigadeOptions = res.data.dictValueObj
            })
        },
        // 获取网格下拉框数据
        // getGridOptions(AreaId) {
        //     let that = this
        //     let parames = {
        //         areaId : AreaId || that.$store.state.userinfo.areaId
        //     }
        //     Dao.getGridInfoByAreaId(parames).then(res => {
        //         that.gridOptions = res.data
        //     })
        // },
        // 获取行业下拉框数据
        getIndustryOptions() {
            let that = this
            let parames = {
                orgCode: localStorage.getItem("ilink_platformCode_platId")
            }
            getIndustryList(parames).then(res => {
                that.industryOptions = res.data
            })
        },
        //获取室内地图列表
        getIndoorInfoOptions(){
            let that = this
            let parames = {
                queryType: 0,
                pageIndex: 0,
                pageSize: 0,
                types: '0,1,2,3'
            }
            getIndoorInfoList(parames).then(res => {
                that.indoorMapOptions = res.data
                that.initIndoor()
            })
        },
        initIndoor(){
            let self = this
            let deployInfo = ''
            let value = Number(self.unitBaseInfoForm.indoorMapId)
            let optinos = self.indoorMapOptions;
            for(let i = 0 ;i<optinos.length;i++){
                if(optinos[i].id === value){
                    deployInfo  = optinos[i].deployInfo
                    break
                }
            }
            if(deployInfo){
                self.indoorIdOptions = JSON.parse(deployInfo);
            }
        },
        changeIndoorMap(value){
            let self = this
            let deployInfo = ''
            let optinos = self.indoorMapOptions;
            for(let i = 0 ;i<optinos.length;i++){
                if(optinos[i].id === value){
                    deployInfo  = optinos[i].deployInfo
                    break
                }
            }
            if(deployInfo){
                self.indoorIdOptions = JSON.parse(deployInfo)
                self.unitBaseInfoForm.indoorId = ''
            }
        },
        // 获取单位列表下拉框数据
        getUserClassOptions() {
            let that = this
            getDictByCode({code: 12}).then(res => {
                that.userClassOptions = res.data.dictValueObj
            })
        },
        // 获取防火等级下拉框数据
        getFireRatingOptions() {
            let that = this
            getDictByCode({code: 13}).then(res => {
                that.fireRatingOptions = res.data.dictValueObj
            })
        },
        // 重命名和校验
        beforeAvatarUpload(file, type, obj) {
            var fielLocal = file.name.split(".")
            var fielType = "." + fielLocal[fielLocal.length-1]
            var fielLocalName = fielLocal[0]
            if(obj) {
                obj[type].key = fielLocalName+'_'+new Date().getTime()+fielType
            } else {
                this[type].key = fielLocalName+'_'+new Date().getTime()+fielType
            }
            const isJPG = file.type === "image/jpeg";
            const isPNG = file.type === "image/png";
            const isLt20M = file.size / 1024 / 1024 < 20;
            if (!isJPG && !isPNG) {
                this.$message.error("图片只能是 JPG/PNG 格式!");
                return false;
            }
            if (!isLt20M) {
                this.$message.error("图片大小不能超过 20MB!");
                return false;
            }
        },
        // 上传成功
        handleAvatarSuccess(res, file, fileList, type, obj) {
            if(obj) {
                obj[type].fileList = fileList
                if(type === 'qiniuDataFireFightingCertifiedStaff') {
                    obj.certificateUrl = util.ilinkArrHandle.getqiniuPicUrlArr(obj[type].fileList).toString() // 消防持证上岗人员
                }
            } else {
                this[type].fileList = fileList
                if(type === 'qiniuDataLogo') {
                    this.unitBaseInfoForm.logoUrl = util.ilinkArrHandle.getqiniuPicUrlArr(this.qiniuDataLogo.fileList).toString() // 单位logo
                } else if(type === 'qiniuDataLandscape') {
                    this.unitBaseInfoForm.viewUrl = util.ilinkArrHandle.getqiniuPicUrlArr(this.qiniuDataLandscape.fileList).toString() // 单位风景图
                }
            }
        },
        // 删除成功
        handleRemovePic(file, fileList, type, obj) {
            if(obj) {
                obj[type].fileList = fileList
            } else {
                this[type].fileList = fileList;
            }
        },
        handleError(res, type) {
            this.$message({
                message: `${TYPEMAP[type]}上传失败`,
                duration: 2000,
                type: 'warning'
            })
        },
        handleExceed(files, fileList, type) {
            this.$message.warning(`${TYPEMAP[type]}最多只能上传一张，如需重新上传请先删除原先图片`)
        },
        // 地图初始化
        initMap() {
            let that = this
            var geoc = new BMap.Geocoder()
            //选取经纬度
            map = new BMap.Map("UnitBaseInfoFormEditBaiduMap")
            map.enableScrollWheelZoom() // 允许缩放
            map.clearOverlays() // 先清除地图上的点
            map.enableKeyboard() // 启用键盘上下左右键移动地图 
            map.setDefaultCursor("crosshair") // 设置鼠标样式

            //经纬度画线
            if(that.oldInfo.longitude && that.oldInfo.latitude){
                this.markAndCenter(that.oldInfo.longitude, that.oldInfo.latitude)
                //map.panTo(new_point1); 
            }else{
                var position = new BMap.Point(116.331398,39.897445);
                map.centerAndZoom(position, 16); 
            }
            
            map.addEventListener("click", (e)=>{   
                // 通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度     
                var pt = e.point;
                geoc.getLocation(pt, (rs)=>{
                    // addressComponents对象可以获取到详细的地址信息
                    var addComp = rs.addressComponents;
                    // 经纬度设置值
                    that.unitBaseInfoForm.longitude = pt.lng
                    that.unitBaseInfoForm.latitude = pt.lat
                    map.clearOverlays()
                    this.markAndCenter(pt.lng,pt.lat)
                })     
            })
        },
        markAndCenter(longitude,latitude){
            var new_point1 = new BMap.Point(longitude, latitude);
            var marker1 = new BMap.Marker(new_point1);  // 创建标注
            map.addOverlay(marker1);              // 将标注添加到地图中
            map.centerAndZoom(new_point1,16);
        },
        // 搜索经纬度
        mapSearch() {
            var acSearch = new BMap.Autocomplete(
                {'input' : 'unitName_mapInput', 'location' : map}
            );
            acSearch.setInputValue(this.valtemp);
            acSearch.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
                var _value = e.item.value; 
                var myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                var local = new BMap.LocalSearch( map, { //智能搜索
                    onSearchComplete: function(results){
                        var position=results.getPoi(0);//得到标注点坐标
                        var lng = position.point.lng;
                        var lat = position.point.lat;
                        var gpsPoint = new BMap.Point(lng,lat);
                        map.centerAndZoom(gpsPoint,16);
                    }
                });
                local.search(myValue);   
            });
        },
        changeBtAutoSendMailMsg(key, index, mailOrMsg) {
            let that = this
            var $dom = $(event.currentTarget)
            var i = index || 0

            if($dom.hasClass('checked')){
                $dom.removeClass('checked')
                if(mailOrMsg){
                    that[key][i].isAutoSendMail = 0
                    $dom.attr({'title': '邮件服务已关闭'})
                }else{
                    that[key][i].isAutoSendMessage = 0
                    $dom.attr({'title': '短信服务已关闭'})
                }
            }else{
                $dom.addClass('checked')
                if(mailOrMsg){
                    that[key][i].isAutoSendMail = 1
                    $dom.attr({'title': '邮件服务已开通'})
                }else{
                    that[key][i].isAutoSendMessage = 1
                    $dom.attr({'title': '短信服务已开通'})
                }
            }
        },
        // 添加兼职管理员
        addPartTimeManager() {
            let defaultObj = {
                id: this.id,
                name: '', 
                role: 15,
                phone: '',
                email: '',
                idCardNumber: '',
                isAutoSendMail: 0,
                isAutoSendMessage : 0
            }
            this.partTimeManagerList.push(defaultObj)
        },
        // 删除兼职管理员
        deletePartTimeManager(index) {
            this.partTimeManagerList.splice(index, 1)
        },
        // 添加消防持证上岗人员
        addFireFightingCertifiedStaff() {
            let defaultObj = {
                id: this.id,
                name: '', 
                tel: '',
                email: '',
                identification: '',
                certificateUrl: '',
                // 上传的文件
                qiniuDataFireFightingCertifiedStaff: {
                    key : '',
                    fileList:[],
                },
            }
            $.extend(defaultObj.qiniuDataFireFightingCertifiedStaff, this.qiniuDefaultData)
            this.fireFightingCertifiedStaffList.push(defaultObj)
        },
        // 删除消防持证上岗人员
        deleteFireFightingCertifiedStaff(index) {
            this.fireFightingCertifiedStaffList.splice(index, 1)
        },
        /* 
         * 多行表单数据重组
         */
        legalRepresentativeDataReset() {
            var that = this
            var arr = that.oldInfo.contacts
            var type = ''
            var [newArr1,newArr2,newArr3,newArr4,newArr5] = [[],[],[],[],[]]

            for(var i=0, len=arr.length; i < len; i++) {
                type = arr[i].role
                if(type == 8) {
                    newArr1.push(arr[i])
                } else if(type == 9) {
                    newArr2.push(arr[i])
                } else if(type == 10) {
                    newArr3.push(arr[i])
                } else if(type == 11) {
                    newArr4.push(arr[i])
                } else if(type == 15) {
                    newArr5.push(arr[i])
                }
            }

            newArr1.length > 0 ? (that.legalRepresentativeList = newArr1) : false
            newArr2.length > 0 ? (that.securityOwnerList = newArr2) : false
            newArr3.length > 0 ? (that.securityManagerList = newArr3) : false
            newArr4.length > 0 ? (that.fireManagerList = newArr4) : false
            newArr5.length > 0 ? (that.partTimeManagerList = newArr5) : false
        },
        multiLineFormIsNull(type) {
            let that = this
            if(that[type].length <= 1 && that[type][0].name == '') {
                return []
            } else {
                return that[type]
            }
        },
        // 消防持证上岗人员数据处理
        resetFireFightingCertifiedStaffList(data) {
            // 深克隆，解决影响data源数据问题
            let dataStr = JSON.stringify(data)
            let newArr = JSON.parse(dataStr)

            for(var i=0, len=newArr.length; i < len; i++) {
                delete newArr[i].qiniuDataFireFightingCertifiedStaff
            }
            return newArr
        },
        // 将建筑物信息中值班人员的数据处理成string
        resetBuildInfoData() {
            let that = this
            let arr = []
            
            arr = JSON.parse(JSON.stringify(that.storiedBuildInfo))
            for(let i=0, len=arr.length; i < len; i++) {
                arr[i].dutyAccounts = arr[i].dutyAccounts.join(',')
            }

            return arr
        },
        // 保存信息
        saveInfo(formName) {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            let multiLineFormIsNull = that.multiLineFormIsNull
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '保存中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    let parames = that.unitBaseInfoForm
                    parames.isExceptionSmsList = Object.prototype.toString.call(parames.isExceptionSmsList) === '[object Array]' ? parames.isExceptionSmsList.join(',') : parames.isExceptionSmsList
                    parames.fireStationRecordUrl = util.ilinkArrHandle.getqiniuPicUrlArr(that.qiniuDataStationRecord.fileList).toString() // 消防备案
                    parames.logoUrl = util.ilinkArrHandle.getqiniuPicUrlArr(that.qiniuDataLogo.fileList).toString() // 单位logo
                    parames.picturesUrl = util.ilinkArrHandle.getqiniuPicUrlArr(that.qiniuDataBuild.fileList).toString() // 建筑总平面图
                    parames.viewUrl = util.ilinkArrHandle.getqiniuPicUrlArr(that.qiniuDataLandscape.fileList).toString() // 单位风景图
                    parames.drawingPicturesUrls = util.ilinkArrHandle.getqiniuPicUrlArr(that.qiniuDataDesign.fileList).toString() // 联网单位图纸
                    parames.storiedBuildInfo = JSON.stringify(that.resetBuildInfoData()) // 建筑物信息
                    // contacts数据
                    parames.contacts = JSON.stringify([].concat(multiLineFormIsNull('legalRepresentativeList'), multiLineFormIsNull('securityOwnerList'), multiLineFormIsNull('securityManagerList'), multiLineFormIsNull('fireManagerList'), multiLineFormIsNull('partTimeManagerList')))
                    // firefighters数据 需要去除掉七牛云的属性
                    parames.fireFighter = JSON.stringify(that.resetFireFightingCertifiedStaffList(multiLineFormIsNull('fireFightingCertifiedStaffList')))

                    // 提交
                    updateBasicInfoExt(parames).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                message: '保存成功！',
                                type: 'success'
                            })
                            setTimeout(function(){
                                loading.close()
                                that.closeFun(true)
                            },1000)
                        } else {
                            loading.close()
                            that.$message({
                                message: res.info,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        }
    },
    watch: {
        // formItemAreaId(val, oldVal) {
        //     if(val !== oldVal) {
        //         this.getGridOptions(val)
        //     }
        // },
        formItemIsExceptionSms(val, oldVal) {
            if(val !== oldVal && val == 1 && (this.unitBaseInfoForm.isExceptionSmsList.length === 0)) {
                this.unitBaseInfoForm.isExceptionSmsList = ['1', '2', '3', '4', '5', '6']
            } else if(val !== oldVal && val == 0) {
                this.unitBaseInfoForm.isExceptionSmsList = []
            }
        },
    },
    computed: { 
        // formItemAreaId() {
        //     return this.unitBaseInfoForm.areaid
        // },
        formItemIsExceptionSms() {
            return this.unitBaseInfoForm.isExceptionSms
        }
    }
}
</script>
<style lang="scss">
.unit-baaseinfo-form-edit-wrap {
    .model-title {
        height: 55px;
        line-height: 40px;
        font-size: 16px;
    }
    .el-form-item {
        margin-bottom: 20px;
    }
    #unitName_mapInput {
        position: absolute;
        right: 10%;
        top: 8px;
        padding: 0 10px;
        width: 20%;
        background-color: rgba(255, 255, 255, 0.8);
        height: 38px;
        color: #333;
        border: 0;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        border-radius: 2px 0 0 2px;
        box-shadow: 1px 1.5px 1px rgba(0,0,0,.25);
    }
    .el-icon-message,
    .el-icon-mobile-phone,
    .el-icon-upload,
    .el-icon-circle-plus-outline,
    .el-icon-remove-outline {
        margin-left: 20px;
        line-height: 40px;
        font-size: 25px;
        font-weight: bold;
        color: #ccc;
        cursor: pointer;
    }
    .el-icon-message.checked,
    .el-icon-mobile-phone.checked,
    .el-icon-message:hover,
    .el-icon-mobile-phone:hover {
        color: #5cb6ff;
    }
    .el-icon-upload {
        color: #5cb6ff;
    }
    .el-icon-circle-plus-outline,
    .el-icon-remove-outline {
        color: #333;
    }
    .isExceptionSmsList-wrap {
        .el-form-item {
            height: 40px;
            line-height: 40px;
        }
    }
    .upload-fire-fighting-cert-wrap {
        display: flex;
        .upload-fire-fighting-cert {
            display: flex;
            .el-upload-list--picture-card {
                .el-upload-list__item {
                    margin: 0 0 0 10px;
                    width: 40px;
                    height: 40px;
                    .el-upload-list__item-actions {
                        display: flex;
                        font-size: 16px;
                        align-items: center;
                        justify-content: space-between;
                        .el-upload-list__item-delete {
                            margin: 0;
                        }
                    }
                }
            }
            .el-upload--picture-card {
                border: none;
                display: flex;
                margin-left: 20px;
                width: 25px;
                height: 40px;
                line-height: 40px;
                font-size: 25px;
                font-weight: bold;
                color: #ccc;
                cursor: pointer;
                .el-icon-upload {
                    margin: 0;
                }
            }
        }
    }
    
}  
</style>

